<template>
<c-card>
  <el-button link type="primary" @click.stop="getDetail('')">
    多图
  </el-button>
  <el-table @selectionChange="selectionChange" :data="tableData" stripe highlight-current-row>
    <el-table-column type="selection" width="100" />
    <el-table-column prop="f14" label="板块名称">
      <template #default="{row}">
        <el-button type="primary" link @click.stop="getDetail(row.f12,row.f14)">{{row.f14}}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="f2" label="最新价">
      <template #default="{row}">
        <el-text :type="getColorName(row.f3)">{{row.f2}}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="f3" label="涨跌比">
      <template #default="{row}">
        <el-text :type="getColorName(row.f3)">{{row.f3}}%</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="f4" label="涨跌额">
      <template #default="{row}">
        <el-text :type="getColorName(row.f3)">{{row.f4}}</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="f104" label="上涨家数"/>
    <el-table-column prop="f105" label="下跌家数"/>
    <el-table-column prop="f128" label="领涨股票">
      <template #default="{row}">
        <el-button type="danger" link @click.stop="getDetail(row.f140,row.f14)">{{row.f128}}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="f136" label="涨跌幅">
      <template #default="{row}">
        <el-text type="danger">{{row.f136}}%</el-text>
      </template>
    </el-table-column>
    <el-table-column prop="f207" label="领跌股票">
      <template #default="{row}">
        <el-button type="success" link @click.stop="getDetail(row.f208,row.f14)">{{row.f207}}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="f222" label="涨跌幅">
      <template #default="{row}">
        <el-text type="success">{{row.f222}}%</el-text>
      </template>
    </el-table-column>
  </el-table>
</c-card>
</template>

<script setup>
import {computed, onBeforeUnmount, onMounted, provide, reactive, ref} from "vue";
import CCard from "../../../c-components/c-card.vue";
import {getStockBK} from "../../../utils/getData.js";
import {getColorName, toStockDetail} from "../../../utils/commonScript.js";
import {useRouter} from "vue-router";

const tableData = ref([])
const router = useRouter()
const selectIds = ref([])
const selectNames = ref([])

const selectionChange = (rows) => {
  selectIds.value = rows.map(item => item.f12)
  selectNames.value = rows.map(item => item.f14)

}

const getDetail = (code,name) => {
  if(code) {
    toStockDetail(router, [code], [name])
  } else {
    toStockDetail(router, selectIds.value.join(), selectNames.value.join())
  }
}
// 获取所有股票信息
const getPageList = () => {
  getStockBK((data) => {
    tableData.value = data
  })
}
getPageList()


</script>

<style lang="scss" scoped>
</style>
